<template>
  <div>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="3">
          <el-button type="primary" size="medium" style="width:100px;" @click="openAddPage">添加</el-button>
        </el-col>
      </el-row>
      <el-table :data="templateData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="attendanceItemName" label="考勤项名称" width="180"></el-table-column>
        <el-table-column prop="attendanceInfo" label="考勤内容" width="180"></el-table-column>
        <el-table-column prop="attendanceTarget" label="考勤指标"></el-table-column>
        <el-table-column prop="targetWeight" label="考评项权重"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openUpdate(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="添加考勤模板" :visible.sync="dialogVisible" width="40%">
      <el-form
        ref="templateForm"
        :model="templateForm"
        :rules="templateFormRules"
        label-width="95px"
      >
        <el-form-item label="部门">
          <el-input v-model="this.deapertName" size="small" readonly></el-input>
        </el-form-item>
        <el-form-item label="考勤项名称" prop="attendanceItemName">
          <el-input v-model="templateForm.attendanceItemName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="考勤内容" prop="attendanceInfo">
          <el-input v-model="templateForm.attendanceInfo" type="textarea" autosize size="small"></el-input>
        </el-form-item>
        <el-form-item label="考勤指标" prop="attendanceTarget">
          <el-input v-model="templateForm.attendanceTarget" size="small"></el-input>
        </el-form-item>
        <el-form-item label="考评项权重" prop="targetWeight">
          <!-- <el-input v-model.number="templateForm.targetWeight" size="small"></el-input> -->
          <el-input-number
            v-model="templateForm.targetWeight"
            :precision="2"
            :step="1"
            :max="100"
            size="small"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isdisabled" @click="submitForm()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑考勤模板" :visible.sync="isdisabledUpdate" width="40%">
      <el-form
        ref="templateUpdateForm"
        :model="templateUpdateForm"
        :rules="templateFormRules"
        label-width="95px"
      >
        <el-form-item label="考勤项名称" prop="attendanceItemName">
          <el-input v-model="templateUpdateForm.attendanceItemName" size="small"></el-input>
        </el-form-item>
        <el-form-item label="考勤内容" prop="attendanceInfo">
          <el-input
            v-model="templateUpdateForm.attendanceInfo"
            type="textarea"
            autosize
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="考勤指标" prop="attendanceTarget">
          <el-input v-model="templateUpdateForm.attendanceTarget" size="small"></el-input>
        </el-form-item>
        <el-form-item label="考评项权重" prop="targetWeight">
          <el-input-number
            v-model="templateUpdateForm.targetWeight"
            :precision="2"
            :step="1"
            :max="100"
            size="small"
          ></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isdisabledUpdateBtn" @click="updateTemplate">提交</el-button>
          <el-button @click="resetUpdateForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      departId: null,
      deapertName: null,
      templateData: null,
      dialogVisible: false,
      isdisabled: false,
      isdisabledUpdate: false,
      isdisabledUpdateBtn: false,
      templateForm: {
        departId: null,
        attendanceItemName: null,
        attendanceInfo: null,
        attendanceTarget: null,
        targetWeight: 0
      },
      templateFormRules: {
        attendanceItemName: [
          { required: true, message: "请填写考勤项名称", trigger: "blur" }
        ],
        attendanceInfo: [
          { required: true, message: "请填写考勤内容", trigger: "blur" }
        ],
        attendanceTarget: [
          { required: true, message: "请填写考勤指标", trigger: "blur" }
        ],
        targetWeight: [
          { required: true, message: "请填写考评项权重", trigger: "blur" }
        ]
      },
      templateUpdateForm: {
        id: null,
        departId: null,
        attendanceItemName: null,
        attendanceInfo: null,
        attendanceTarget: null,
        targetWeight: 0
      }
    };
  },
  created: function() {
    this.getJsApiTeckit();
  },
  methods: {
    async getJsApiTeckit() {
      var result = await this.$httpd.get("/DingDingSecurity/GetJsapiTicket");
      if (result.status != 200) {
        this.$message.error("获取钉钉信息出错");
        return;
      }
      this.corpId = result.data.corpId;
      this.getCode(this.corpId);
    },
    //获取个人免登code
    getCode(corpId) {
      var that = this;
      that.$dd.ready(() => {
        that.$dd.runtime.permission.requestAuthCode({
          corpId: corpId, // 企业id
          onSuccess: function(info) {
            that.code = info.code;
            that.getDeparts(that.code);
          }
        });
      });
    },
    async getDeparts(code) {
      var result = await this.$httpd.get(
        `/EmpSalary/GetdepartmentById?code=${code}`
      );
      if (result.status != 200) {
        this.$message.error("获取部门数据出错");
        return;
      }
      this.departId = result.data.id;
      this.deapertName = result.data.name;
      this.getAttemdamceTemps(this.departId);
    },
    async getAttemdamceTemps(departId) {
      var result = await this.$httpd.get(
        `/AttendanceTemplate/QueryAttendanceTemplates?dePartId=${departId}`
      );
      if (result.status != 200) {
        this.$message.error("获取考勤模板数据出错");
        return;
      }
      this.templateData = result.data.data;
    },
    openAddPage() {
      this.dialogVisible = true;
    },
    async openUpdate(id) {
      this.isdisabledUpdate = true;
      var result = await this.$httpd.get(
        `/AttendanceTemplate/GetAttendanceTemplatesById?id=${id}`
      );
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      this.templateUpdateForm = result.data.data;
    },
    submitForm() {
      this.$refs.templateForm.validate(async v => {
        if (v) {
          this.isdisabled = true;
          this.templateForm.departId = this.departId;
          var result = await this.$httpd.post(
            "/AttendanceTemplate/Add",
            this.templateForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            this.isdisabled = false;
          } else {
            this.isdisabled = false;
            this.dialogVisible = false;
            this.resetForm();
            if (this.departId) {
              this.getAttemdamceTemps(this.departId);
            }
            this.$message.success({
              message: result.data.message,
              type: "success"
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.templateForm.resetFields();
    },
    resetUpdateForm() {
      this.$refs.templateUpdateForm.resetFields();
    },
    async updateTemplate() {
      this.$refs.templateUpdateForm.validate(async v => {
        if (v) {
          var result = await this.$httpd.post(
            "/AttendanceTemplate/Update",
            this.templateUpdateForm
          );
          if (result.status != 200 || result.data.returnStatus == 0) {
            this.$message.error(result.data.message);
            return;
          } else {
            this.isdisabledUpdateBtn = false;
            this.isdisabledUpdate = false;
            if (this.departId) {
              this.getAttemdamceTemps(this.departId);
            }
            this.$message.success({
              message: result.data.message,
              type: "success"
            });
          }
        } else {
          return false;
        }
      });
    },
    async del(id) {
      var result = await this.$httpd.post("/AttendanceTemplate/Del", {
        id: id
      });
      if (result.status != 200 || result.data.returnStatus == 0) {
        this.$message.error(result.data.message);
        return;
      }
      if (this.departId) {
        this.getAttemdamceTemps(this.departId);
      }
      this.$message.success({
        message: result.data.message,
        type: "success"
      });
    }
  }
};
</script>
<style scoped>
</style>